/**
* 课程管理
*/
<template>
  <div v-cloak>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dataStatistics' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-button
        @click="showCourse(1)"
        style="float: right"
        type="primary"
        size="medium"
        icon="el-icon-plus"
        >新增</el-button
      >
    </el-breadcrumb>
    <!-- 数据 -->
    <div class="user-search" >
      <el-row :gutter="20">
        <el-col :span="4" v-for="item in courseList" :key="item.courseId">
          <div
            style="cursor: pointer;padding-bottom: 20px;"
            class="grid-content bg-purple"
            @click="goProject(item.courseId)"
          >
            <el-image class="grid-content-img" :src="item.coverPlan">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <div class="grid-content-title">
              <div style=" height: 30px;">{{ item.name }}</div>
              <div>
                共 {{ item.joinNum ? item.joinNum : 0 }}人参与
                {{ item.lessonNum ? item.lessonNum : 0 }}个视频课程
              </div>
            </div>
            <div style="text-align: left; margin-top: 10px">
              <el-button
                type="primary"
                size="medium"
                @click.stop="showCourse(2, item)"
                icon="el-icon-edit"
                circle
              ></el-button>
              <el-button
                type="danger"
                @click.stop="deleteCorse(item.courseId)"
                size="medium"
                icon="el-icon-delete"
                circle
              ></el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="width: 100%; text-algin: left; margin-top: 15px">
      <Paging
        :pageNum="this.pageForm.page"
        :total="count"
        :pageSize="this.pageForm.pageSize"
        :small="true"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      ></Paging>
    </div>
    <!-- 操作项目 -->
    <el-dialog
      :title="titleType == 1 ? '添加' : '修改'"
      :visible.sync="madecourseDemo"
      :close-on-click-modal="false"
      width="45%"
      @close="closeMadecourseDemo"
    >
      <el-form
        label-width="120px"
        :close-on-click-modal="false"
        :model="madecourse"
        :rules="ruleCourse"
        ref="madecourse"
        :key="madecourseDemo"
      >
        <el-form-item label="封面" prop="coverPlan">
          <upload
            :mAction="this.abdpConfig.getApiServerPath() + '/common/upload'"
            :key="refresh + 'a'"
            :fileListStr="this.madecourse.coverPlan"
            :imgLimit="1"
            @getImgList="
              (val) => {
                this.madecourse.coverPlan = this.uploadPictureParameters(
                  1,
                  val
                );
              }
            "
          ></upload>
        </el-form-item>
        <el-form-item label="项目名" prop="name">
          <el-input
            style="width: 90%"
            size="medium"
            v-model.trim="madecourse.name"
            maxlength="30"
            show-word-limit
            placeholder="请输入项目名"
          ></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input-number
            v-model="madecourse.sorted"
            :min="1"
            :max="1000"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeMadecourseDemo">取消</el-button>
          <el-button
            type="primary"
            :loading="logining"
            class="title"
            @click="subFormCourse('madecourse')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Paging from "@/components/Paging";
import upload from "@/components/upload.vue"; //图片上传
import $ from "jquery";
export default {
  // 注册组件
  components: {
    Paging,
    upload,
  },
  data() {
    return {
      pageForm: {
        page: 1,
        pageSize: 12,
      },
      refresh: 0,
      courseList: [],
      titleType: 1,
      logining: false,
      madecourseDemo: false,
      madecourse: {
        courseId: "",
        name: "",
        coverPlan: "",
        sorted:1,
      },
      ruleCourse: {
        name: [
          {
            required: true,
            message: "项目名不能为空",
            trigger: "blur",
          },
        ],
        coverPlan: [
          {
            required: true,
            message: "请上传封面",
            trigger: "change",
          },
        ],
      },
      count: 0,
    };
  },

  /**
   * 数据发生改变
   */
  mounted() {
    let that = this;
    window.addEventListener("resize", function () {
      return (() => {
        that.infoPage();
      })();
    });
  },
  /**
   * 创建完毕
   */
  created() {
    var that = this;
    that.getalloptin();
    that.infoPage();

    // document.getElementsByClassName('grid-content-img')[0].style.height=this.pictureHeight.height
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 初始化页面
    infoPage() {
      var that = this;
      var imgWidth = 0;
      setTimeout(() => {
        imgWidth = $(".grid-content-img").width();
        $(".grid-content-img").height(imgWidth * 0.562 + "px");
      }, 200);
    },
    // 添加和修改项目
    showCourse(type, item) {
      this.titleType = type;
      if (type == 1) {
        //添加
        this.madecourse = {
          courseId: "",
          name: "",
          coverPlan: "",
          sorted:1,
        };
        this.madecourseDemo = true;
      } else {
        // 修改
        this.madecourse.courseId = item.courseId;
        this.madecourse.name = item.name;
        this.madecourse.sorted = item.sorted;
        this.madecourse.coverPlan = item.coverPlan;
        this.madecourseDemo = true;
      }
    },
    // 关闭操作
    closeMadecourseDemo() {
      this.madecourseDemo = false;
      this.madecourse = {
        courseId: "",
        name: "",
        coverPlan: "",
         sorted:1,
      };
    },
    // 去项目视频列表
    goProject(courseId) {
      sessionStorage.setItem("courseId", JSON.stringify(courseId));
      this.$router.push({
        path: "project",
        name: "project",
        params: {
          courseId: courseId,
        },
      });
    },
    // 提交保存项目
    subFormCourse(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.logining = true;
          if (this.titleType == 1) {
            var tData = {
              action: "backstage/course/save",
              // headers: this.abdpConfig.json,
              headers: this.abdpConfig.getApiJson(),
              data: {
                coverPlan: this.madecourse.coverPlan,
                name: this.madecourse.name,
                sorted:this.madecourse.sorted
              },
            };
          } else {
            var tData = {
              action: "backstage/course/save",
              // headers: this.abdpConfig.json,
              headers: this.abdpConfig.getApiJson(),
              data: {
                courseId: this.madecourse.courseId,
                coverPlan: this.madecourse.coverPlan,
                name: this.madecourse.name,
                sorted:this.madecourse.sorted
              },
            };
          }

          this.abdpAjax.http(tData).then((rsp) => {
            if (rsp.data.code == "200") {
              this.$message.success("操作成功");
              //提示
              this.logining = false;
              this.closeMadecourseDemo();
              this.infoPage();
              this.getalloptin();
            } else {
              this.logining = false;
              this.$message.error(rsp.data.message);
            }
          });
        } else {
          return false;
        }
      });
    },
    //删除
    deleteCorse(courseId) {
      this.$confirm("此操作将永久删除该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let tData = {
            action: "backstage/course/remove",
            // headers: this.abdpConfig.json,
            headers: this.abdpConfig.getApiJson(),
            data: {
              courseId: courseId,
            },
          };
          this.abdpAjax.http(tData).then((rsp) => {
            if (rsp.data.code == "200") {
              // 后端返回的是字符串，页面组件int生效，这里强转一下
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getalloptin();
            } else {
              this.$message.error(rsp.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 查询列表
    getalloptin() {
      var tData = {
        action: "backstage/course/page",
        headers: this.abdpConfig.getApiJson(),
        data: {
          page: this.pageForm.page,
          pageSize: this.pageForm.pageSize,
        },
      };
      this.abdpAjax.http(tData).then((rsp) => {
        if (rsp.data.code == 200) {
          //数据
          this.courseList = rsp.data.data.records;
          this.count = rsp.data.data.total;
        } else {
          this.$message.error(rsp.data.message);
        }
      });
    },
    /**
     * 处理本地上传图片时所需参数
     * type:图片类型
     * parameter:图片上传集合
     */
    uploadPictureParameters: function (type, parameter) {
      let imgList = [];
      let img = "";
      if (type > 1) {
        if (parameter.length > 0) {
          for (let i = 0; i < parameter.length; i++) {
            if (parameter[i].response) {
              imgList.push(parameter[i].response.data);
            } else {
              imgList.push(parameter[i].url);
            }
          }
        }
        this.refresh += 1;
        return imgList;
      } else {
        if (parameter.length > 0) {
          this.refresh += 1;
          return (img = parameter[0].response.data);
        }
        this.refresh += 1;
        return;
      }
    },
    //上一页下一页按钮
    currentChange(val) {
      this.pageForm.pageSize = val;
      this.getalloptin();
    },
    //每页显示几条数据按钮
    sizeChange(val) {
      this.pageForm.pageSize = val;
      this.getalloptin();
    },
    // 关闭
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  padding: 0 20px;
  text-align: center;
}

.grid-content img {
  width: 100%;
  object-fit: cover;
}
.grid-content-title {
  text-align: left;
  font-size: 15px;
 
}
.grid-content-title div {
  margin-top: 10px;
}
.row-bg {
  padding: 10px 0;
}
[v-cloak] {
  display: none !important;
}
</style>
